import React, { useEffect, useRef, useState } from 'react';

const SeamlessScrollTable = ({ data }:any) => {
    const containerRef = useRef<HTMLDivElement>(null);
    const contentRef = useRef<HTMLDivElement>(null);
    const [totalHeights, settotalHeights] = useState(0);
  
    useEffect(() => {
      const container = containerRef.current;
      const content = contentRef.current;
      
     
      if (!container || !content) return;
  
      let animationFrameId: number;
      let startTime: number | null = null;
      const duration = 10000; // 10秒完成一次完整滚动
    //   *30
      let totalHeight = (content.offsetHeight / 2)-10; // 实际内容高度的一半
  
      const animate = (currentTime: number) => {
        if(totalHeight==-10){
            totalHeight =  (content.offsetHeight / 2)-10
        }
        // if(data.length<4){
        //   totalHeight=0
        //   settotalHeights(totalHeight)
        // }
        
       
        if (!startTime) startTime = currentTime;
        const elapsed = currentTime - startTime;
        const progress = (elapsed % duration) / duration;
      
        const translateY = -(progress * totalHeight);
        content.style.transform = `translateY(${translateY}px)`;
      
        if (elapsed >= duration) {
          startTime = currentTime;
        }
  
        animationFrameId = requestAnimationFrame(animate);
      };
  
      animationFrameId = requestAnimationFrame(animate);
  
      const handleMouseEnter = () => {
        cancelAnimationFrame(animationFrameId);
        content.style.transform = content.style.transform;
      };
  
      const handleMouseLeave = () => {
        startTime = null;
        animationFrameId = requestAnimationFrame(animate);
      };
  
      container.addEventListener('mouseenter', handleMouseEnter);
      container.addEventListener('mouseleave', handleMouseLeave);
  
      return () => {
        cancelAnimationFrame(animationFrameId);
        container.removeEventListener('mouseenter', handleMouseEnter);
        container.removeEventListener('mouseleave', handleMouseLeave);
      };
    }, []);
  
    const numbers = [...Array(10)].map((_, i) => i + 1);

  return (
    <div className=" ">
      <div 
        ref={containerRef}
        className="overflow-hidden"
      >
        <div
          ref={contentRef}
          className="flex flex-col"
         
        >
          {/* 原始列表 */}
          {data.map((item:any,index:number) => (
                    <div
                      key={item.id}
                      className={`tab-box-contentss`}
                    >
                      <div className="">
                        <div
                          style={{ fontSize: ' 0.1rem' }}
                          
                        >
                          {item.category}
                        </div>
                      </div>
                      
                      <div style={{ fontSize: ' 0.1rem' }}>
                        {item.eventDescribe}
                      </div>
                      <div style={{ fontSize: ' 0.1rem' }}>{item.createTime.split('-')[1]+'-'+item.createTime.split('-')[2]}</div>
                    </div>
                  ))}
                  {totalHeights==0?<div></div>:data.map((item:any,index:number) => (
                    <div
                      key={item.id}
                      className={`tab-box-contentss`}
                    >
                      <div className="">
                        <div
                          style={{ fontSize: ' 0.1rem' }}
                          
                        >
                          {item.category}
                        </div>
                      </div>
                      <div style={{ fontSize: ' 0.1rem' }}>
                        {item.eventDescribe}
                      </div>
                      <div style={{ fontSize: ' 0.1rem' }}>{item.createTime.split(' ')[1]}</div>
                      
                     
                    </div>
                  ))}
                  
          {/* {data.map((num:any,index:any) => (
            <div
              key={index}
              className=" flex items-center justify-center font-semibold text-gray-700 border-b border-gray-100"
            >
              数字 {index}
            </div>
          ))}
          {data.map((num:any,index:any) => (
            <div
              key={index}
              className=" flex items-center justify-center  font-semibold text-gray-700 border-b border-gray-100"
            >
              数字 {index}
            </div>
          ))} */}
        </div>
      </div>
    </div>
  );
};

export default SeamlessScrollTable;